<template>
  <el-tree
    v-bind="$attrs"
    v-on="$listeners"
    :data="optionsData"
    :show-checkbox="showCheckbox"
    :check-strictly="checkStrictly"
    default-expand-all
    node-key="id"
    ref="tree"
    @node-click="setModel"
    @check="setModel"
    highlight-current>
  </el-tree>
</template>

<script>
  export default {
    name: "my-tree",
    model: {
      prop: 'value',
      event: 'changed'
    },
    props:{
      /** 如果使用api查询,传入url **/
      url: {
        type: String
      },
      /** 显示复选框 **/
      showCheckbox: {
        type: Boolean,
        default: true
      },
      /** 如果不使用api查询,可以在此参数直接传入option数组 **/
      options: {
        type: Array,
        default: ()=>{
          return []
        }
      },
      /** 值 **/
      value: {
        type: Array,
        default: ()=>{
          return []
        }
      },
      /** 父子项不关联 **/
      checkStrictly: {
        type: Boolean,
        default: true
      }
    },
    data(){
      return{
        optionsData: [],
      }
    },
    methods:{
      setModel(){
        let val = this.$refs.tree.getCheckedKeys();
        this.$emit('changed',val)
      },
      /** 判断字典名称是否为空  为空使用options作为数据源， 不为空按url查询数据作为数据源 **/
      init(){
        if(this.url == null || this.url.trim() == ''){
          this.optionsData = this.options;
        }else{
          this.$ajax.requestCommonGet(this.url).then(res=>{
            this.optionsData = res;
          });
        }
      }
    },
    created() {
      this.init();
    },
    mounted() {
      this.$refs['tree'].setCheckedKeys(this.value);
    }
  }
</script>

<style scoped>

</style>
